<template>
  <div>
    <el-form style="margin: 10px 0" :model="queryForm" inline>
      <el-form-item label="账号">
        <el-input
          suffix-icon="el-icon-position"
          style="width: 200px"
          v-model="queryForm.account"
          placeholder="请输入账号"
        ></el-input>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input
          suffix-icon="el-icon-position"
          style="width: 200px"
          v-model="queryForm.nickname"
          placeholder="请输入昵称"
        ></el-input>
      </el-form-item>
    <!-- 角色选择 -->
    <el-form-item label="角色">
      <el-select
        v-model="queryForm.role"
        placeholder="请选择角色"
        style="width: 200px"
        clearable
      >
        <el-option label="管理员" value="1"></el-option>
        <el-option label="普通用户" value="2"></el-option>
      </el-select>
    </el-form-item>

    <!-- 角色状态选择 -->
    <el-form-item label="角色状态">
      <el-select
        v-model="queryForm.roleStatus"
        placeholder="请选择角色状态"
        style="width: 200px"
        clearable
      >
        <el-option label="正常" value="1"></el-option>
        <el-option label="封禁" value="0"></el-option>
      </el-select>
    </el-form-item>
    </el-form>
    <el-form style="margin: 10px 0" :model="queryForm" inline>
      <el-form-item>
        <el-button class="mll-5" type="primary" @click="fetchUser"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button class="mll-5" type="warning" @click="reset">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          class="mll-5"
          type="danger"
          @click="deleteSelected"
          :disabled="!this.selectedIds.length"
          >批量删除</el-button
        >
      </el-form-item>
    </el-form>

    <el-card class="box-card">
      <el-table
        :data="userList"
        script
        style="width: 100%"
        @selection-change="handelSelectionChange"
        :row-key="(row) => row.id"
      >
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column prop="id" label="用户id" align="center" />
        <el-table-column prop="phone" label="电话" align="center" />
        <el-table-column prop="account" label="账号" align="center" />
        <el-table-column label="角色" align="center">
          <template #default="{ row }">
            {{ row.role === 1 ? "管理员" : "普通用户" }}
          </template>
        </el-table-column>
            <el-table-column label="角色状态" align="center">
      <template #default="{ row }">
        <span :style="{ color: row.roleStatus === 0 ? 'red' : 'black' }">
          {{ row.roleStatus === 1 ? '正常' : '封禁' }}
        </span>
      </template>
    </el-table-column>
        <el-table-column prop="nickname" label="用户昵称" align="center" />
        <el-table-column prop="gender" label="性别" align="center" />
        <el-table-column prop="birthDate" label="出生日期" align="center" />
        <el-table-column prop="address" label="地址" align="center" />

        <el-table-column prop="createTime" label="创建时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div style="display: flex; gap: 1px; justify-content: center">
              <el-button
                type="danger"
                style="padding: 5px 5px; font-size: 12px"
                @click="deleteUse([scope.row.id])"
                >删除</el-button
              >
              <el-button
                :type="scope.row.roleStatus === 1 ? 'warning' : 'primary'"
                style="padding: 5px 5px; font-size: 12px"
                @click="
                  enableUse(scope.row.id, scope.row.roleStatus === 1 ? 0 : 1)
                "
              >
                {{ scope.row.roleStatus === 1 ? "禁用" : "启用" }}
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <span class="demonstration" />
        <div style="padding: 10px 0; text-align: center">
          <el-pagination
            @current-change="handelPageChange"
            :current-page="queryForm.pageNo"
            :page-size="queryForm.pageSize"
            :total="total"
            :page-count="pages"
            layout="total,prev,pager,next,jumper"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>
  
<script>
import { getUserPage, deleteUserByIds, enableUser } from "@/api/user";
import dayjs from "dayjs";
export default {
  data() {
    return {
      queryForm: {
        pageNo: 1,
        pageSize: 5,
        nickname: "",
        account: "",
        role: null,
        roleStatus: null,
      },
      userList: [],
      total: 0,
      pages: 0,
      selectedIds: [],
    };
  },
  methods: {
    async fetchUser() {
      try {
        const response = await getUserPage(this.queryForm);
        this.userList = response.data.list;
        this.total = Number(response.data.total);
        this.pages = Number(response.data.pages);
        console.info("list:", this.userList);
        console.info("total:", this.total);
        console.info("pages:", this.pages);
      } catch (error) {
        console.error("查询失败", error);
      }
    },
    handelPageChange(page) {
      this.queryForm.pageNo = page;
      this.fetchUser();
    },
    reset() {
      this.queryForm.nickname = "";
      this.queryForm.account = "";
      this.queryForm.role = null;
      this.queryForm.roleStatus = null;
      this.fetchUser();
    },
    async enableUse(id, roleStatus) {
      try {
        const ableForm = { id, roleStatus };
        await enableUser(ableForm);
        this.$message.success("操作成功");
        this.fetchUser();
      } catch (error) {
        this.$message.error("操作失败" + (error.message || "未知错误"));
      }
    },
    async deleteUse(ids) {
      try {
        await deleteUserByIds(ids);
        this.$message.success("删除成功");
        if (this.userList.length <= ids.length && this.queryForm.pageNo > 1) {
          this.queryForm.pageNo -= 1;
        }
        this.fetchUser();
      } catch (error) {
        this.$message.error("删除失败" + (error.message || "未知错误"));
      }
    },
    async deleteSelected() {
      if (this.selectedIds.length === 0) {
        this.$message.warning("请至少选择一条记录");
        return;
      }
      this.deleteUse(this.selectedIds);
    },
    handelSelectionChange(selected) {
      this.selectedIds = selected.map((item) => item.id);
    },
  },
  mounted() {
    this.fetchUser();
  },
  filters: {
    formatDate(value) {
      return value ? dayjs(value).format("YYYY-MM-DD HH:mm:ss") : "";
    },
  },
};
</script>
  
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.mll-5 {
  margin-left: 10px;
}
</style>